<template>
    <div v-if="isShowCard" class="animate__animated" :class="tabAnimateClass">
        <el-tabs type="border-card" v-model="activeTab" v-if="hasPermission('FINDPAPERLIST')" @tab-change="onTabChange">
            <el-tab-pane name="padding">
                <template #label>
                    <span class="tabs-label">
                        <lemon-icon :size="20" icon="Edit" style="bottom: -5px" />
                        <span>待阅卷</span>
                    </span>
                </template>
            </el-tab-pane>
            <el-tab-pane name="finish">
                <template #label>
                    <span class="tabs-label">
                        <lemon-icon :size="20" icon="Finished" style="bottom: -5px" />
                        <span>已阅卷</span>
                    </span>
                </template>
            </el-tab-pane>
            <paper-card-list uri="/gradingPaper/findPaperList" :type="activeTab" @on-paper-info="onPaperInfo" class="animate__animated" :class="cardAnimateClass" />
        </el-tabs>

        <!-- 空状态 -->
        <template v-else>
            <el-empty description="暂无阅卷信息！" />
        </template>
    </div>

    <!-- 阅卷详情 -->
    <template v-else>
        <grading-paper-list :paper="paperInfo" :tab-name="activeTab" @on-back="onBack" class="animate__animated" :class="paperAnimateClass" />
    </template>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import PaperCardList from "@/views/system/components/paper/PaperCardList.vue";
import GradingPaperList from "@/views/system/components/gradingPaper/GradingPaperList.vue";
import { hasPermission, delay } from "@/utils/common";

//获取自定义全局方法
const { http } = inject<any>("method");

//选中的tab
const activeTab = ref<string>("padding");

//动画样式
const cardAnimateClass = ref("");

//tab切换时触发
const onTabChange = async (_tab: string) => {
    cardAnimateClass.value = "animate__flipInX";
    await delay(1000);
    cardAnimateClass.value = "";
};

//tab动画样式
const tabAnimateClass = ref("");
const paperAnimateClass = ref("");

//是否展示Card
const isShowCard = ref<boolean>(true);

//试卷详情
const paperInfo = ref<any>({});

//点击试卷时触发
const onPaperInfo = async (paper: any) => {
    const data = await http.get(`/gradingPaper/getGradingPaper/${paper.id}`);
    if (data) {
        tabAnimateClass.value = "animate__bounceOutLeft";
        await delay(500);
        tabAnimateClass.value = "";
        paperAnimateClass.value = "animate__bounceInRight";
        paperInfo.value = data;
        isShowCard.value = false;
        await delay(1000);
        paperAnimateClass.value = "";
    }
};

//返回
const onBack = async () => {
    paperAnimateClass.value = "animate__bounceOutRight";
    await delay(500);
    isShowCard.value = true;
    paperAnimateClass.value = "";
    tabAnimateClass.value = "animate__bounceInLeft";
    await delay(1000);
    tabAnimateClass.value = "";
};
</script>

<style scoped lang="less"></style>
